<template>
	<view class="all">
		<view class="top">
			<view class="jifen">优荟积分</view>
			<!-- <view class="jifen" @click="record">操作记录</view> -->
		</view>
		<view class="list">
			<view class="list_top"> 转账数额 </view>
			<view class="list_box">
				<input :placeholder="placeholder" :value="shue" type="number" class="list_box_input" @input="input_tap"/>
				<view class="list_box_text"  @click="all_tap"> | 全部 </view>
			</view>
		</view>
		<view class="list">
			<view class="list_top"> 输入账号 </view>
			<view class="list_box">
				<input placeholder="请输入会员账号" class="list_box_input" @input="name_tap"/>
				<!-- <view class="list_box_text"> | 全部 </view> -->
			</view>
			<view style="font-size: 22upx; color: #999;"> 转出前请务必确认信息无误，已经转出，不可撤销。 </view>
		</view>
		<view class="list">
			<view class="list_top"> 交易密码 </view>
			<view class="list_box">
				<input placeholder="请输入交易密码" type="number" class="list_box_input" @input="password_tap"/>
			</view>
		</view>
		<view class="tishi">
			温馨提示：
			<view> 优荟积分转账1:1，无手续费。 </view>
			<view> 请务必保证收款用户的准确性，否则余额将无法找回。 </view>
			<view> 如果长时间未到账，请及时联系客服。 </view>
		</view>
		<view class="queren">
			<view :class="queren_key == 1?'queren_texts':'queren_text'" @click="friends_transfer_api"> 确认转账 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholder:'可转账数额0',
				shue:'',
				password:'',
				queren_key:0,
				name:'',
				money:'',
				moneys:''
			}
		},
		onShow() {
			this.user_assets_api()
		},
		methods: {
			friends_transfer_api() {
				var that = this
				if( that.queren_key == 0 ) {
					return
				}
				that.$request(that.$Api.friends_transfer_api, {
					access_token: uni.getStorageSync('access_token'),
					money:that.shue,
					account:that.name,
					password:that.password
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.user_assets_api()
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
						setTimeout(function () {
							uni.navigateBack()
						}, 2000);
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			all_tap() {
				this.shue = this.money
				this.queren_key_tap()
			},
			//首页
			user_assets_api() {
				var that = this
				that.$request(that.$Api.user_assets_api, {
					access_token: uni.getStorageSync('access_token'),
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.money = res.data.data.money
						that.placeholder = '可转账数额'+that.money
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			record() {
				uni.navigateTo({
					url:'../record/record'
				})
			},
			name_tap(num) {
				this.name = num.detail.value
				this.queren_key_tap()
			},
			input_tap(num) {
				this.shue = num.detail.value
				this.queren_key_tap()
			},
			password_tap(num) {
				this.password = num.detail.value
				this.queren_key_tap()
			},
			queren_key_tap() {
				if( this.shue != '' && this.password != '' && this.name != '' ) {
					this.queren_key = 1
				}else{
					this.queren_key = 0
				}
			},
		}
	}
</script>

<style lang="less">
	page{
		.all{
			.queren{
				.queren_text{
					width: 700upx;
					border-radius: 20upx;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
					background: #999;
					color: #fff;
					margin-left: 25upx;
				}
				.queren_texts{
					width: 700upx;
					border-radius: 20upx;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
					background: #ff0000;
					color: #fff;
					margin-left: 25upx;
				}
				width: 750upx;
				padding: 10upx 0;
				background: #fff;
				position: fixed;
				bottom: 0;
				z-index: 2;
			}
			.tishi{
				width: 700upx;
				font-size: 22upx;
				padding: 25upx 25upx 130upx 25upx;
				color: #999;
			}
			.list{
				.list_box{
					.list_box_text{
						font-size: 28upx;
						color: #333;
						margin-top: 4upx;
					}
					.list_box_input{
						width: 500upx;
						font-size: 28upx;
						color: #333;
					}
					display: flex;
					justify-content: space-between;
					margin-top: 20upx;
					background: #eee;
					padding: 15upx;
					width: 670upx;
				}
				.list_top{
					font-size: 36upx;
					font-weight: bold;
				}
				width: 700upx;
				padding: 25upx;
			}
			.top{
				.jifen{
					font-size: 28upx;
					color: #999;
				}
				display: flex;
				width: 700upx;
				padding: 25upx;
				justify-content: space-between;
			}
		}
	}
</style>
